<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="layouts/main">
<head>
    <!-- https://github.com/Stuk/jszip -->
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link type="text/css" rel="stylesheet" href="/js/ztree/css/metroStyle/metroStyle.css"/>
    <link rel="shortcut icon " type="images/x-icon" href="/images/favicon.ico">
    <title>文件预览</title>
</head>
<body>
<div align="center">
    <div id="compress_viewer" class="ztree" th:data-fileurl="${fileUrl}"></div>
</div>
<script type="text/javascript" src="/js/jquery.min-1.10.2.js"></script>
<script type="text/javascript" src="/js/ztree/js/jquery.ztree.all.js"></script>
<script type="text/javascript" src="/js/jszip.js"></script>
<script type="text/javascript">
    $(function() {
        var fileUrl = $("#compress_viewer").data("fileurl");

        fetch(fileUrl)
            .then(function (response) {
                if (response.status === 200 || response.status === 0) {
                    return Promise.resolve(response.blob());
                } else {
                    return Promise.reject(new Error(response.statusText));
                }
            })
            .then(JSZip.loadAsync)
            .then(function (zip) {
                // 对象下的所有属性元素转成数组
                var files = Object.entries(zip.files);
                // 按照文件名称排序
                files = files.sort(function(a, b){
                    return a[0].localeCompare(b[0]);
                });

                var file;
                var node;
                var dirMap = new Map();
                var dirNameAry;
                var dir;
                var dirName;
                var nodes = [];

                for(var i = 0; i < files.length; i++){
                    file = files[i];
                    dirNameAry = file[0].split('/');
                    if(file[1].dir) {
                        // file[0] 类似 images/icon/

                        dirName = dirNameAry[dirNameAry.length - 2] + '/';
                        if((dir = dirMap.get(file[0].substring(0, file[0].length - dirName.length))) != undefined) {
                            node = {
                                "name": dirName,
                                "children": [],
                                "isParent": true
                            };
                            dir.children.push(node);
                            dirMap.set(file[0], node);
                        } else {
                            node = {
                                "name": dirName,
                                "children": [],
                                "isParent": true
                            };
                            nodes.push(node);
                            dirMap.set(file[0], node);
                        }

                    } else {
                        // file[0] 类似 images/icon.png

                        node = {
                            "name": dirNameAry[dirNameAry.length - 1]
                        };
                        if(file[0].indexOf('/') > 0 && (dir = dirMap.get(file[0].substring(0, file[0].lastIndexOf('/') + 1))) != undefined) {
                            dir.children.push(node);
                        } else {
                            nodes.push(node);
                        }
                    }
                }
                // 构造文件目录树
                initZTree("compress_viewer", nodes);
            });

        // 初始化文件目录树
        function initZTree(id, zTreeNodes) {
             var settings = {
                data: {
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: "parentId",
                        rootPId: -1
                    }
                },
                check:{
                    enable:true,
                    nocheckInherit:true
                 }
             };

            zTreeObj = $.fn.zTree.init($("#" + id), settings, zTreeNodes);
            zTreeObj.expandAll(true);
        }
    });
</script>
</body>
</html>